<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

	<link rel="stylesheet" type="text/css" href="css/pid-toolbar.css" >
 <script src="./jquery.min.js"></script>
	<style>
   
		.pid-layout-folder-icon{
			position:absolute;
			top:37px;
			right:-18px;
			width: 37px;
			height: 37px;
			cursor: pointer;
		}
		
		/*****left*****/
		.pid-layout-left-default{
			background: url(./images/left-default.png) no-repeat center center;
		}
		.pid-layout-left-mousedown{
			background: url(./images/left-mousedown.png) no-repeat center center;
		}
		.pid-layout-left-mouseover{
			background: url(./images/left-mouseover.png) no-repeat center center;
		}
		
		/*****right*****/
		.pid-layout-right-default{
			background: url(./images/right-default.png) no-repeat center center;
		}
		.pid-layout-right-mousedown{
			background: url(./images/right-mousedown.png) no-repeat center center;
		}
		.pid-layout-right-mouseover{
			background: url(./images/right-mouseover.png) no-repeat center center;
		}
		
		/*****dwon*****/
		.pid-layout-down-default{
			background: url(./images/down-default.png) no-repeat center center;
		}
		.pid-layout-down-mousedown{
			background: url(./images/down-mousedown.png) no-repeat center center;
		}
		.pid-layout-down-mouseover{
			background: url(./images/down-mouseover.png) no-repeat center center;
		}
		
		/*****up*****/
		.pid-layout-up-default{
			background: url(./images/up-default.png) no-repeat center center;
		}
		.pid-layout-up-mousedown{
			background: url(./images/up-mousedown.png) no-repeat center center;
		}
		.pid-layout-up-mouseover{
			background: url(./images/up-mouseover.png) no-repeat center center;
		}
		

		
    </style>
</head>
<body style="margin:50px;">


	<div style="color:#000;width:800px; height:400px;background:gray;"> 
		
		
		
		<!--west---折叠区域-->
		<div id="id_outer" style="float:left; background-color:red; width:200px; height:100%">
		
				<div style="position:relative;width:100%;height:100%;">
				
					<div  id="id_content" style="position:absolute;width:100%;height:100%">
						
							<table>
								<tr>
									<td>我在中间层的区域文字我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
								<tr>
									<td>我在中间层的区域文字</td>
								</tr>
							</table>
						
						
						
					</div>
					<!--- 按钮布局核心逻辑：外层div是position:relative，内部图片div是position:absolute;-->
					<div id="id_pro" class="pid-layout-folder-icon pid-layout-left-default" style="" ></div>

	
				
				</div>
				
			
			
				
		</div> 
		<!--west---折叠区域-->
		
		<!--center-->
		<div style="float:left: height:100%">
			我在底层,代表最外层div，是用户提供的div<br />
			我在底层,代表最外层div，是用户提供的div<br />
			我在底层,代表最外层div，是用户提供的div<br />
		</div>
		<!--center-->
		
	</div> 
</body>
<script>
	$("#id_pro").mousedown(function(){
		var outer = $("#id_outer");
		// 样式
		if(outer.width()<80){
			$(this).removeClass("pid-layout-right-default").removeClass("pid-layout-right-mouseover").addClass("pid-layout-right-mousedown");
		}else{
			
			$(this).removeClass("pid-layout-left-default").removeClass("pid-layout-left-mouseover").addClass("pid-layout-left-mousedown");
		}
		
	});
	$("#id_pro").mouseup(function(){
		var outer = $("#id_outer");
		// 样式
		if(outer.width()<80){
			// 从右到左收缩 的事件
			$("#id_outer").width(200);
			//内容区域
			$("#id_content").show();
		}else{
			// 从左到右收缩 的事件
			$("#id_outer").width(10);
			//内容区域
			$("#id_content").hide();
			
			
		}
		
		
		
		
	});
	$("#id_pro").mouseover(function(){
		var outer = $("#id_outer");
		// 样式
		if(outer.width()<80){
			$(this).removeClass("pid-layout-right-default").removeClass("pid-layout-right-mousedown").addClass("pid-layout-right-mouseover");

		}else{
			$(this).removeClass("pid-layout-left-default").removeClass("pid-layout-left-mousedown").addClass("pid-layout-left-mouseover");

		}
		
	});
	$("#id_pro").mouseout(function(){
		var outer = $("#id_outer");
		// 样式
		if(outer.width()<80){
			$(this).removeClass("pid-layout-left-mouseover").removeClass("pid-layout-left-mousedown").removeClass("pid-layout-right-mouseover").removeClass("pid-layout-right-mousedown").addClass("pid-layout-right-default");

		}else{
			$(this).removeClass("pid-layout-left-mouseover").removeClass("pid-layout-left-mousedown").removeClass("pid-layout-right-mouseover").removeClass("pid-layout-right-mousedown").addClass("pid-layout-left-default");

		}
	});
</script>
</html>